<template>
  <div class="add_data_ds">
    <div class="add_data_ds-title">基本信息配置</div>
    <a-form-model
        ref="ruleForm"
        :model="infoForm"
        :rules="rules"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 21 }"
      >
      <!-- 数据源名称 -->
      <a-form-model-item label="数据集名称" prop="name">
        <a-input v-model="infoForm.name" placeholder="请输入数据集名称"/>
      </a-form-model-item>
      <!-- 说明 -->
      <a-form-model-item label="说明（可选）" prop="remark">
        <a-textarea v-model="infoForm.remark" class="user_input" placeholder="" />
      </a-form-model-item>
      <!-- 数据源 -->
      <a-form-model-item label="数据源" prop="datasourceId">
        <a-select v-model="infoForm.datasourceId" placeholder="请选择数据源">
          <a-select-option v-for="item in datasource_list" :key="item.datasourceId" :value="item.datasourceId">
            {{ item.datasourceName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- 事件类型 -->
      <a-form-model-item label="数据集类型" prop="type">
        <a-radio-group name="type"  v-model="infoForm.type" @change="onChangeDatasetType">
          <a-radio :value="1" :disabled="isDisable">
            事件分析
          </a-radio>
          <a-radio :value="2" :disabled="isDisable">
            漏斗分析
          </a-radio>
          <a-radio :value="3" :disabled="isDisable">
            路径分析
          </a-radio>
          <a-radio :value="4" :disabled="isDisable">
            留存分析
          </a-radio>
          <a-radio :value="0" :disabled="!isDisable">
            自定义sql
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
import bus from '@/views/components/bus'
import store from '@/store'

  export default {
    props: ['drawer', 'form'],
    data() {
      return {
        datasource_list: [],
        rules: {
          name: [
            { required: true, message: '请输入数据集名称', trigger: 'blur'},
            { max: 100, message: '最大长度限制为100个字符', trigger: 'blur'},
          ],
          datasourceId: [
            { required: true, message: '请选择数据源', trigger: 'change' }
          ],
          type: [
            { required: true, message: '请选择分析类型', trigger: 'change' }
          ]
        },
        isDisable: null,
        DSNlist: [],
        infoForm: {
          name: null,
          remark: null,
          datasourceId: null,
          type: null
        }
      }
    },
    watch: {
      infoForm: {
        handler (value) {
          this.SET_REPORTFORM({...value})
          this.form.name = value.name
          this.form.remark = value.remark
          this.form.type = value.type
        },
        deep: true
      },
      'infoForm.datasourceId' (value, old) {
        if (this.form.datasourceId !== value) {
          this.infoForm.type = ''
        }
        this.form.datasourceId = value
        this.datasource_list.forEach(item =>{
          if (item.datasourceId == value) {
            if(item.type == 1) {
              this.isDisable = true
            } else {
              this.isDisable = false
            }
          }
        })
      },
      drawer ( value ) {
        if (!value) {
          this.$refs.ruleForm && this.$refs.ruleForm.resetFields();
        }
      }
    },
    computed: {
      ...mapState('custom', ['reportForm']),
    },
    methods: {
      ...mapActions('custom', ['get_userSelect_datasource']),
      ...mapMutations('custom', ['SET_REPORTFORM', 'SET_RULESBOOLEAN']),
      ...mapActions('orgManage',['getPermissionListByOrgId']),
      onChangeDatasetType (e) {
        bus.$emit('onChangeDatasetType',e.target.value);
      },
      load_datasource_List () {
        let orgId = store.getters.selectedOrg.id
        this.getPermissionListByOrgId({orgId:orgId, pageSize: 10000, page:1})
          .then(res => {
            this.datasource_list = res
          }).catch(err => this.$message.error('获取数据源失败，原因：' + err.msg + '！'))
      },
      onRulesForm () {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.SET_RULESBOOLEAN(true)
          } else {
            this.SET_RULESBOOLEAN(false)
          }
        })
      },
      onClickRadio (val) {
      }
    },
    mounted () {
      this.infoForm.name = this.form.name
      this.infoForm.type = this.form.type
      this.infoForm.datasourceId = this.form.datasourceId
      this.infoForm.remark = this.form.remark
      this.load_datasource_List()
    },
  }
</script>

<style scoped>
  .add_data_ds{
    margin-top: 12px;
  }

  .add_data_ds-title {
    font-weight: bold;
    font-size: 16px;
    font-weight: 500;
    color: rgba(0,0,0,.85);
    margin-bottom: 24px;
  }
</style>
